<template>
  <div>
    <div class="title-head">
      <div class="title">{{ detailtitle }}</div>
    </div>
    <el-table
      :data="tabledatas"
      border
      @selection-change="handleSelectionChange"
      style="width:100%;"
    >
      <!-- <el-table-column type="selection"></el-table-column> -->
      <el-table-column label="内容介绍">
        <template slot-scope="scope">
          <span>
            <el-input
              size="mini"
              placeholder="请输入内容"
              v-model="scope.row.text"
            ></el-input>
          </span>
          <!-- <span v-else>{{ scope.row.text }}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="是否为小标题" width="120">
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.title"
            placeholder="标题选择"
            clearable
            size="mini"
            :style="{ width: '97%' }"
          >
            <el-option
              v-for="(item, index) in istiileOption"
              :key="index"
              :label="item.title"
              :value="item.id"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column
        label=""
        width="110"
        align="center"
        :render-header="renderHeader"
      >
        <template slot-scope="scope">
          <el-link
            @click="delect(scope.$index)"
            :underline="false"
            type="primary"
          >
            删除
          </el-link>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import Vue from 'vue'
export default {
  data() {
    return {
      tabledatas: [],
      multipleSelection: [],
      istiileOption: [
        {
          title: '是',
          id: 1,
        },
        {
            title:'否',
            id:0
        }
        
      ],
    }
  },
  created() {
    // this.tabledatas = []
    // this.tabledatas.map((i) => {
    // //   i.show = true
    //   return i
    // })
  },
  mounted(){
    this.tabledatas = this.detailData
  },
  props: {
    //标题
    detailtitle: '',
    //接收的数据
    detailData:{
        type:Array,
        default:()=>{
            return []
        }
    }
  },
  watch:{
      detailData(val){
          this.tabledatas = val
      }
  },
  methods: {
    getData() {
      //把表单的数据传给父组件
      this.$emit('sendData', this.tabledatas)
    },
    renderHeader(h) {
      return (
        <div>
          <el-button type="primary" onClick={this.addAll} class="addbtn">
            新增
          </el-button>
        </div>
      )
    },
    edit(row, index) {
      row.show = row.show ? false : true
      Vue.set(this.tabledatas, index, row)
      // 修改后保存
    },
    editAll() {
      this.tabledatas.map((i, index) => {
        i.show = true
        Vue.set(this.tabledatas, index, i)
      })
    },
    submit() {
      this.tabledatas.map((i, index) => {
        i.show = false
        Vue.set(this.tabledatas, index, i)
      })
    },
    // 单个复制
    cope(val, index) {
      this.tabledatas.splice(index, 0, JSON.parse(JSON.stringify(val)))
    },
    // 单个删除
    delect(index) {
      this.tabledatas.splice(index, 1)
    },
    //批量新增
    addAll() {
      if (this.multipleSelection.length == 0) {
        let list = {
        //   show: true,
          title: 0,
          text: ''
        }
        this.tabledatas.push(list)
      } else {
        this.multipleSelection.forEach((val, index) => {
          this.tabledatas.splice(index, 0, JSON.parse(JSON.stringify(val)))
        })
      }
    },
    //批量删除
    delectAll() {
      for (let i = 0; i < this.tabledatas.length; i++) {
        const element = this.tabledatas[i]
        element.id = i
      }
      if (this.multipleSelection.length == 0)
        this.$message.error('请先至少选择一项')
      this.multipleSelection.forEach((element) => {
        this.tabledatas.forEach((e, i) => {
          if (element.id == e.id) {
            this.tabledatas.splice(i, 1)
          }
        })
      })
    },
    //选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
  },
}
</script>

<style scoped lang='scss'>
.title-head {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 20px;
  color: #333;
  font-weight: bold;
  &::before {
    content: '';
    display: block;
    width: 3px;
    height: 20px;
    background-color: #4c68ef;
    margin-right: 10px;
  }
}

::v-deep {
  .el-link {
    margin: 0 5px !important;
    font-size: 13px !important;
  }
}
</style>
